<template>
  <div>
    <h4 style="margin-bottom: 15px">
      {{ num + 1 }} # {{ tableData[num].title && tableData[num].title }}
      <i class="el-icon-question" @click="drawer = true"></i>
    </h4>
    {{ checkList }}
    <el-checkbox-group v-model="checkList">
      <template v-for="(item, index) in JSON.parse(tableData[num].options)">
        <el-checkbox :key="index" :label="item.index">
          {{ getLetterByIndex(index) }})
          {{ item.value }}
        </el-checkbox>
      </template>
    </el-checkbox-group>
    <el-button-group>
      <el-button
        type="success"
        size="mini"
        icon="el-icon-arrow-left"
        :disabled="num == 0"
        @click="AddPageS"
        >上一题</el-button
      >
      <el-button type="success" size="mini" v-if="num != 19" @click="AddPage"
        >下一题<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
      <el-button type="success" size="mini" v-if="num == 19"
        >提交<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>
    <el-drawer
      title="提示"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <div class="drawer">
        {{ tableData[num].tips }}
      </div>
      <el-button type="success" size="mini" @click="drawer = false" class="btn"
        >确定</el-button
      >
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: ["item"],
  data() {
    return {
      checkList: [],
      drawer: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapMutations("learnStudy", ["SET_PAGE", "SET_PAGES"]),
    ...mapActions("learnStudy", ["getList"]),
    AddPage() {
      this.SET_PAGE();
    },
    AddPageS() {
      this.SET_PAGES();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getLetterByIndex(index) {
      //根据索引渲染对应 A B C D
      return String.fromCharCode("A".charCodeAt(0) + index);
    },
  },
  computed: {
    ...mapState("learnStudy", ["tableData", "num"]),
  },
};
</script>

<style scoped>
.el-checkbox-group > div {
  margin-bottom: 15px;
}

.el-icon-question {
  cursor: pointer;
}
.btn {
  position: absolute;
  bottom: 10%;
  left: 10%;
}
.drawer {
  padding: 10%;
}
.el-checkbox-group .el-checkbox {
  display: block;
  margin-bottom: 15px;
}
</style>